<template>
    <div @keyup.enter="addBypass()" class="modal add-road" id="roadmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<table class="table">
						<thead>
							<tr>
								<th colspan="4">
									<span class="close" data-dismiss="modal" aria-hidden="true">&times;</span>
									添加线路线
								</th>
							</tr>
						</thead>
						<!--正在请求-->
						<tbody class="result" v-show="result=='loading'">
							<div style="height: 150px;">
								<img src="../../../../img/loading.gif" style="width: 80px"/>
					    		<p>正在链接数据，请稍后……</p>
							</div>
						</tbody>
						<!--成功-->
						<tbody class="result" v-show="result=='success'">
							<div style="height: 150px;padding-top: 30px;">
								<img src="../../../../img/success.png" />
								<span >{{$t('common.successNotice')}}</span>
							</div>
						</tbody>
						<!--添加-->
						<tbody v-show="result=='add'">
							<tr>
								<td>选择路线：</td>
								<td colspan="3">
									<select  class="route" :class="[routes.length<=0?'nosele':'']" :disabled="routes.length > 0 ? false : true"
									@blur="testVal('.route', 'allpass')" @focus="noEmpty('.route')"  >
									 	<option v-if="routes.length>0" v-for="option in routes" v-bind:value="option" >
											线路{{ option }}
										</option>
										<option v-if="routes.length<=0" value="">
											没有线路
										</option>
									</select>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<div class="notice">
						<span>*{{errorMsg}}</span>
					</div>
					<button class="enter butn button button--aylen" @click="addBypass()">确认</button>
					<button class="cancel butn button button--aylen" data-dismiss="modal">取消</button>
				</div>
			</div>
    	</div>
    </div>
</template>
<script>
	import SystemService from 'services/systemService'
	import formatTest from 'libs/formatTest'
	
	export default {
		props: {
			routes: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				result:"add",
				errorMsg:""
			}
		},
		methods: {
			 addBypass() {
				this.errorMsg = ""
				$('.notice').hide()

				 if ( this.testVal('.route', 'allpass') ) {
					let bypass = {
						oper:"add",
						group: $('.route').val()
					};
					this.result = "loading"
					SystemService.doBypass(bypass)
					.then((res) => {
						
						if (res.errcode === 0) {
							this.result = "success"
							this.$emit('getData');
							setTimeout(function () {
								$('#roadmodal').modal('hide');
							}, 800);
							let _this = this
							setTimeout(function () {
								_this.result = "add"
							}, 1500);
							this.errorMsg = ""
							$('.notice').hide()				
						} else if (res.level == "error" && !res.errcode === 0) {
							this.result = "add"
							this.errorMsg = res.errorMessage
							$('.notice').show().addClass('animated shake')
							setTimeout(function() {
								$('.notice').removeClass('animated shake')
							}, 200)
						}
					})
				}
            },
			noEmpty(ele) {
				let test = new formatTest(ele)
			    test.notEmpty()
			},
			testVal(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, false)
				let flag = test.testFormat()
				if ( !flag ) {
					$(ele).popover('show');
					setTimeout(function() {
						$(ele).popover('destroy')
					}, 1000)
				}
				return flag
			}
		}
    }
</script>